<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { fetchScreenDetail, updateScreen } from '@/service/api';

defineOptions({
  name: 'ScreenDesignerModal'
});

interface Props {
  visible: boolean;
  screenId: number | null;
}

const props = withDefaults(defineProps<Props>(), {
  visible: false,
  screenId: null
});

interface Emits {
  (e: 'update:visible', visible: boolean): void;
  (e: 'success'): void;
}

const emit = defineEmits<Emits>();

const loading = ref(false);
const screenData = ref<Api.Dataplatform.Screen | null>(null);
const componentConfig = ref('');
const layoutConfig = ref('');
const backgroundConfig = ref('');
const datasourceConfig = ref('');

function handleUpdateVisible(visible: boolean) {
  emit('update:visible', visible);
}

async function loadScreenData() {
  if (!props.screenId) return;

  loading.value = true;
  try {
    const { data } = await fetchScreenDetail(props.screenId);
    if (data) {
      screenData.value = data;
      componentConfig.value = data.componentConfig || '[]';
      layoutConfig.value = data.layoutConfig || '{}';
      backgroundConfig.value = data.backgroundConfig || '{}';
      datasourceConfig.value = data.datasourceConfig || '{}';
    }
  } finally {
    loading.value = false;
  }
}

async function handleSave() {
  if (!screenData.value) return;

  try {
    await updateScreen({
      id: screenData.value.id,
      name: screenData.value.name,
      width: screenData.value.width,
      height: screenData.value.height,
      componentConfig: componentConfig.value,
      layoutConfig: layoutConfig.value,
      backgroundConfig: backgroundConfig.value,
      datasourceConfig: datasourceConfig.value
    });
    window.$message?.success('保存成功');
    emit('success');
  } catch (error) {
    console.error('保存失败:', error);
  }
}

onMounted(() => {
  loadScreenData();
});
</script>

<template>
  <NModal
    :show="visible"
    preset="card"
    title="大屏设计器"
    class="w-90vw h-90vh"
    :bordered="false"
    :segmented="{ content: true, footer: true }"
    @update:show="handleUpdateVisible"
  >
    <NSpin :show="loading">
      <div class="h-full flex-col gap-16px">
        <NAlert type="info" closable>
          <template #header>设计器说明</template>
          这是一个简化的大屏设计器界面。完整的拖拽式设计器需要集成专业的可视化编辑组件库（如 AntV X6、Vue Flow 等）。
          <br />
          当前版本提供基础的配置编辑功能，您可以通过 JSON 配置来定义大屏的组件、布局、背景和数据源。
        </NAlert>

        <div class="flex-1 grid grid-cols-2 gap-16px overflow-hidden">
          <div class="flex-col gap-8px">
            <div class="font-bold">组件配置 (JSON)</div>
            <NInput
              v-model:value="componentConfig"
              type="textarea"
              placeholder="组件配置，例如: [{ id: 'chart1', type: 'bar', ... }]"
              :autosize="{ minRows: 10, maxRows: 20 }"
              class="flex-1"
            />
          </div>

          <div class="flex-col gap-8px">
            <div class="font-bold">布局配置 (JSON)</div>
            <NInput
              v-model:value="layoutConfig"
              type="textarea"
              placeholder="布局配置，例如: { chart1: { x: 0, y: 0, width: 400, height: 300 } }"
              :autosize="{ minRows: 10, maxRows: 20 }"
              class="flex-1"
            />
          </div>

          <div class="flex-col gap-8px">
            <div class="font-bold">背景配置 (JSON)</div>
            <NInput
              v-model:value="backgroundConfig"
              type="textarea"
              placeholder="背景配置，例如: { type: 'color', value: '#000000' }"
              :autosize="{ minRows: 10, maxRows: 20 }"
              class="flex-1"
            />
          </div>

          <div class="flex-col gap-8px">
            <div class="font-bold">数据源配置 (JSON)</div>
            <NInput
              v-model:value="datasourceConfig"
              type="textarea"
              placeholder="数据源配置，例如: { chart1: { datasourceId: 1, sql: 'SELECT ...' } }"
              :autosize="{ minRows: 10, maxRows: 20 }"
              class="flex-1"
            />
          </div>
        </div>
      </div>
    </NSpin>

    <template #footer>
      <NSpace justify="end">
        <NButton @click="handleUpdateVisible(false)">取消</NButton>
        <NButton type="primary" @click="handleSave">保存</NButton>
      </NSpace>
    </template>
  </NModal>
</template>

<style scoped></style>
